<template>
    <right-layout :title="title" :visible.sync="show" @closeLayout="closeLayout" :loading="loading2"
        class="layout-wrap">
        <el-form :model="ruleForm" :rules="rule" ref="form" label-width="160px" label-position="left">
            <el-form-item label="售后流程：" prop="typeCode" v-if="flowType=='SH'">
                <selectPara v-model="ruleForm.typeCode" :options="sysParaObj['SP_PAY_TYPE']"
                    :label.sync="ruleForm.typeName">
                </selectPara>
            </el-form-item>
            <el-form-item label="订单流程：" prop="typeCode" v-if="flowType=='DD'">
                <selectPara v-model="ruleForm.typeCode" :options="sysParaObj['SP_ORDER_TYPE']"
                    :label.sync="ruleForm.typeName">
                </selectPara>
            </el-form-item>
            <el-form-item label="主题：" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="流程说明：" prop="descr">
                <el-input type="textarea" rows="3" v-model="ruleForm.descr">
                </el-input>
                <text-length v-model="ruleForm.descr" :length.sync="ruleForm.descr_l" :max="128">
                </text-length>
            </el-form-item>
            <el-form-item label="执行条件：">
                <selectCondition v-model="ruleForm.trigCond" :firstCode="firstCode" v-if="isselectCondition">
                </selectCondition>
            </el-form-item>
            <el-form-item label="处理流程：">
                <el-table :data="jdArr">
                    <el-table-column prop="stepName" label="节点名称">
                    </el-table-column>
                    <el-table-column prop="stepCode" label="节点编号">
                    </el-table-column>
                    <el-table-column prop="descr" label="说明" align="left">
                    </el-table-column>
                    <el-table-column prop="seqNo" label="排序">
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" class="mw-0" @click="editJd(scope.row)">编辑</el-button>
                            <el-button type="text" class="mw-0" @click="deleteJd(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="showJd" style="margin-top:5px;">新增节点</el-button>
            </el-form-item>
            <el-form-item label="状态：">
                <commCheckbox :options="sysParaObj['SP_STATSU_B']" v-model="ruleForm.statusCode"
                    :label.sync="ruleForm.statusName" defaultPara>
                </commCheckbox>
            </el-form-item>

        </el-form>
        <div slot="foot">
            <div class="left">
                <el-button type="text" @click="closeLayout">关闭</el-button>
            </div>
            <el-button type="primary" @click="submitFun" :loading="loading">保存</el-button>
            <el-button type="primary" @click="saveAndNew" :loading="loading" v-if="!ruleForm.id">保存并新建</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
        </div>
        <!-- 新增节点弹窗 -->
        <el-dialog :visible.sync="isshowJd" :title="jdTitle" :append-to-body="true" :close-on-click-modal="false"
            width="40%">
            <el-form :model="ruleForm2" :rules="rules2" label-width="160px" label-position="left" ref="form2"
                label-suffix="：" class="layout-wrap">
                <el-form-item label="节点名称" prop="stepName">
                    <el-input v-model="ruleForm2.stepName"></el-input>
                </el-form-item>
                <el-form-item label="节点编号" prop="stepCode">
                    <el-input v-model="ruleForm2.stepCode"></el-input>
                </el-form-item>
                <el-form-item label="节点说明" prop="descr">
                    <el-input type="textarea" rows="3" v-model="ruleForm2.descr">
                    </el-input>
                    <text-length v-model="ruleForm2.descr" :length.sync="ruleForm2.descr_l" :max="128">
                    </text-length>
                </el-form-item>
                <el-form-item label="排序" prop="seqNo">
                    <el-input-number v-model="ruleForm2.seqNo" :min="0" :step="1" size="medium">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="状态">
                    <commCheckbox :options="sysParaObj['SP_STATSU_B']" v-model="ruleForm2.statusCode"
                        :label.sync="ruleForm2.statusName" defaultPara>
                    </commCheckbox>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addJd">保 存</el-button>
                <el-button @click="isshowJd = false">取 消</el-button>
            </div>
        </el-dialog>
    </right-layout>
</template>

<script>
    import RightLayout from '@/components/common/comp/RightLayout';
    import textLength from '@/components/textLength';
    import commCheckbox from '@/components/commCheckbox';
    import selectPara from '@/components/selectPara';
    import {
        getSysParaListByCodes
    } from '@/service/core/dictionary.js';
    import {
        commPara
    } from '@/mixins/mixins'
    import {
        szOrderFlowInfo,
        saveszOrderFlow
    } from './service'
    import request from "@/utils/requestServe";
    import selectCondition from './selectCondition'
    import {
        mapState
    } from 'vuex';
    export default {
        name: '',
        components: {
            RightLayout,
            textLength,
            commCheckbox,
            selectPara,
            selectCondition
        },
        mixins: [commPara],
        props: {
            flowType: String
        },
        data() {
            var validate_descr = (rule, value, callback) => {
                if (this.ruleForm.descr_l > 128) {
                    callback(new Error());
                } else {
                    callback();
                }
            };
            var validate_descr2 = (rule, value, callback) => {
                if (this.ruleForm2.descr_l > 128) {
                    callback(new Error());
                } else {
                    callback();
                }
            };
            return {
                arrdemo: [],
                sysParaObj: {
                    'SP_PAY_TYPE': [],
                    'SP_ORDER_TYPE': [],
                    'SP_STATSU_B': [],
                },
                isselectCondition: true,
                casOpt: [],
                conditionArr: [],
                items: [],
                jdArr: [],
                editIndex: null,
                jdTitle: '',
                ruleForm2: {
                    id: '',
                    stepCode: '',
                    stepName: '',
                    descr: '',
                    statusName: '',
                    statusCode: '',
                    seqNo: '',
                    descr_l: 0
                },
                rules2: {
                    stepName: [{
                        required: true,
                        message: '节点名称必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 32,
                        message: '长度限制0-32位',
                        trigger: 'blur'
                    }],
                    stepCode: [{
                        pattern: /^[0-9A-Za-z]+$/,
                        message: '格式错误',
                        trigger: 'blur'
                    }, {
                        required: true,
                        message: '节点编号必填',
                        trigger: 'blur'
                    }, {
                        min: 0,
                        max: 32,
                        message: '长度限制0-32位',
                        trigger: 'blur'
                    }],
                    descr: [{
                        validator: validate_descr,
                        message: '长度限制256字',
                        trigger: 'blur'
                    }],
                    seqNo: [{
                        pattern: /^[\w\W]{0,5}$/,
                        message: "长度限制0-5位",
                    }, {
                        required: true,
                        message: "排序必须填写",
                    }],
                    statusCode: [{
                        required: true,
                        message: "请选择状态",
                    }]
                },
                isshowJd: false,
                show: false,
                title: '',
                loading: false,
                loading2: false,
                tempStyle: [{
                    label: '折叠规格版',
                    value: 'ZD'
                }, {
                    label: '展开规格版',
                    value: 'ZK'
                }],
                ruleForm: {
                    id: '',
                    title: '',
                    typeCode: '',
                    typeName: '',
                    descr: '',
                    descr_l: 0,
                    trigCond: [],
                    setList: [],
                    statusCode: '',
                    statusName: '',
                },
                firstCode: '',
                rule: {
                    title: [{
                            required: true,
                            message: '主题必填',
                            trigger: 'blur'
                        },
                        {
                            min: 0,
                            max: 32,
                            message: '长度限制32位',
                            trigger: 'blur'
                        },
                    ],
                    typeCode: [{
                        required: true,
                        message: '请选择流程类型',
                        trigger: 'blur'
                    }],
                    descr: [{
                        validator: validate_descr,
                        message: '长度限制256字',
                        trigger: 'blur'
                    }],
                    statusCode: [{
                        required: true,
                        message: "请选择状态",
                    }]

                },
            }
        },
        created() {
            if (this.flowType == 'DD') {
                this.firstCode = 'SP_TRAI_CONDITION'
            } else if (this.flowType == 'SH') {
                this.firstCode = 'SP_SALEH_CONDITION'
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,

            }),

        },
        methods: {
            refreshC() {
                this.isselectCondition = false;
                this.$nextTick(() => {
                    this.isselectCondition = true
                })
            },
            showJd() {
                this.jdTitle = '新增节点'
                this.isshowJd = true;
                this.$nextTick(() => {
                    this.$refs.form2.resetFields()
                })
            },

            deleteJd(index) {
                this.jdArr.splice(index, 1)
            },
            addJd() {
                let obj = JSON.parse(JSON.stringify(this.ruleForm2))
                this.$refs.form2.validate(valid => {
                    if (valid) {
                        if (this.jdTitle == '新增节点') {
                            this.jdArr.push(obj)

                        } else if (this.jdTitle == '编辑节点') {
                            this.jdArr.splice(this.editIndex, 1, obj)
                        }
                        this.jdArr = this.jdArr.sort(this.compare(('seqNo')))
                        this.isshowJd = false
                    }
                })

            },
            compare(property) {
                return (a, b) => {
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            editJd(item, index) {
                this.jdTitle = '编辑节点'
                this.editIndex = index
                this.ruleForm2.id = item.id;
                this.ruleForm2.stepCode = item.stepCode;
                this.ruleForm2.stepName = item.stepName;
                this.ruleForm2.descr = item.descr;
                this.ruleForm2.statusName = item.statusName;
                this.ruleForm2.statusCode = item.statusCode;
                this.ruleForm2.seqNo = item.seqNo;
                this.isshowJd = true
            },
            showLayout(data) {
                if (data) {
                    this.title = "修改流程";
                    this.ruleForm.id = data.id
                    this.queryDetail();
                } else {
                    this.title = "新增流程";
                    this.ruleForm.id = "";
                }
                this.show = true;
            },
            submitFun() { //保存
                this.ruleForm.trigCond.forEach((i) => {
                    for (let j = 0; j < i.items.length; j++) {
                        delete i.items[j].thirdArr
                        delete i.items[j].casOpt
                    }
                })
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id,
                            title: this.ruleForm.title,
                            typeCode: this.ruleForm.typeCode,
                            typeName: this.ruleForm.typeName,
                            descr: this.ruleForm.descr,
                            trigCond: this.ruleForm.trigCond.length ? JSON.stringify(this.ruleForm
                                .trigCond) : '',
                            setList: this.jdArr.length ? JSON.stringify(this.jdArr) : '',
                            statusCode: this.ruleForm.statusCode,
                            statusName: this.ruleForm.statusName,
                            flowId: '',
                            cate: this.flowType

                        }

                        this.loading = true;
                        saveszOrderFlow(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功！'
                                })
                                this.$emit('refresh');
                                this.closeLayout();
                            }
                            this.loading = false;
                        })
                    }
                })
            },
            saveAndNew() { // 保存并新建
                this.ruleForm.trigCond.forEach((i) => {
                    for (let j = 0; j < i.items.length; j++) {
                        delete i.items[j].thirdArr
                        delete i.items[j].casOpt
                    }
                })
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id,
                            title: this.ruleForm.title,
                            typeCode: this.ruleForm.typeCode,
                            typeName: this.ruleForm.typeName,
                            descr: this.ruleForm.descr,
                            trigCond: this.ruleForm.trigCond.length ? JSON.stringify(this.ruleForm
                                .trigCond) : '',
                            setList: this.jdArr.length ? JSON.stringify(this.jdArr) : '',
                            statusCode: this.ruleForm.statusCode,
                            statusName: this.ruleForm.statusName,
                            flowId: '',
                            cate: this.flowType

                        }

                        this.loading = true;
                        saveszOrderFlow(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '保存成功！'
                                })
                                this.$emit('refresh');
                                this.closeLayout1();
                            }
                            this.loading = false;
                        })
                    }
                })
            },
            resetForm() { //重置

                if (!this.ruleForm.id) {
                    this.$nextTick(() => {
                        this.ruleForm.trigCond = []
                        this.jdArr = []
                        this.ruleForm.statusCode = ''
                        this.ruleForm.statusName = ''
                        this.$refs.form.resetFields();
                        this.sysParaObj = JSON.parse(JSON.stringify(this.sysParaObj)); // 默认参数反显
                    })
                } else {
                    this.queryDetail();
                }
            },
            closeLayout() {
                this.ruleForm.id = '';
                this.show = false;
                setTimeout(() => {
                    this.resetForm();
                }, 500)
            },
            closeLayout1() {
                this.ruleForm.id = '';
                setTimeout(() => {
                    this.resetForm();
                }, 500)
            },
            queryDetail() { // 查询明细
                let params = {
                    id: this.ruleForm.id
                }
                szOrderFlowInfo(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (data) {
                            this.ruleForm.id = data.id;
                            this.ruleForm.title = data.title;
                            this.ruleForm.typeCode = data.typeCode;
                            this.ruleForm.typeName = data.typeName;
                            this.ruleForm.descr = data.descr;
                            this.ruleForm.statusCode = data.statusCode;
                            this.ruleForm.statusName = data.statusName;
                            if (data.trigCond) {
                                this.ruleForm.trigCond = JSON.parse(data.trigCond)
                            }
                            if (data.szOrderSteps) {
                                this.jdArr = data.szOrderSteps
                            }
                            this.refreshC()
                        }
                    }
                })
            },
        }
    }
</script>